<template>
  <div class="user-tags">
    <div v-if="loading" style="background: #fff; padding: 20px">
      <a-skeleton active />
    </div>
    <div
      v-if="(!customTagOptiosn.length && !loading)"
      style="padding: 30px 0; background: #fff"
    >
      <a-empty
        :description="`${userInfo.id === userId ? '您' : '用户'}还未创建自定义标签`"
        :image="require('~/assets/images/nodata.png')"
      />
    </div>
    <div class="user-tags-list">
      <div class="user-tags-list-item"
        v-for="item in customTagOptiosn"
        :key="item.name">
        <div class="user-tags-list-item-title"><p :tag-name="item.name">{{ item.name }}</p></div>
        <div class="user-tags-list-item-tag">
          <p class="tag"
            :style="{
              background: itemName.color + '30',
              color: itemName.color,
              border: `1px solid ${itemName.color}60`
            }"
            v-for="itemName in item.value"
            :key="itemName.id"
            :tag-name="itemName.tagName">{{ itemName.tagName }}
            <a-icon @click="deleteCustomTag(itemName.id)" v-if="userInfo.id === userId" type="close" />
          </p>
        </div>
      </div>
      <div
        class="add-custom-tag"
        v-if="userInfo.id === userId && !loading">
        <p @click="tagModalVisible = true"><i class="ri-price-tag-3-line"></i>创建标签</p>
      </div>
    </div>
    <CustomTagModal
      v-if="tagModalVisible"
      @close-modal="closeTagModal" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { categoryMap, getRandomColor } from '~/config/optionMap'
export default {
  name: 'UserTags',
  props: {
    userId: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      loading: true,
      customTagOptiosn: [],
      tagModalVisible: false
    }
  },

  created () {
    this.getUserCustomTags()
  },

  methods: {
    async getUserCustomTags () {
      try {
        const { data } = await this.$axios.get(`/gimishare/api/v1/tag?userId=${this.userId}`)
        const tagMapOptions = (data || []).reduce((prev, cur) => {
          const color = getRandomColor()
          prev[cur.pid] = [...(prev[cur.pid] || []), { ...cur, color }]
          return prev
        }, {})
        this.customTagOptiosn = Object.entries(tagMapOptions).map(([key, value]) => {
          return {
            name: categoryMap[key],
            value
          }
        })
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },

    async deleteCustomTag (tagId) {
      try {
        await this.$axios.get(`/gimishare/api/v1/tag/delete?id=${tagId}`)
        this.$message.success('删除标签成功')
        this.getUserCustomTags()
      } catch (error) {
        console.log(error)
      }
    },

    closeTagModal (render) {
      this.tagModalVisible = false
      if (render) {
        this.getUserCustomTags()
      }
    }
  },

  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  }
}
</script>

<style lang="less" scoped>
@effect-color: #2e84d8;
@normal-color: #2a323d;
.user-tags {
  background: #fff;
  &-list {
    .add-custom-tag {
      text-align: center;
      line-height: 36px;
      color: #999;
      font-family: 'SourceHanSansSC-Regular-2';
      padding-bottom: 5px;
      p {
        cursor: pointer;
        display: inline-block;
        font-size: 13px;
        i {
          margin-right: 6px;
          font-size: 16px;
          position: relative;
          top: 1px;
        }
      }
    }
    &-item {
      &-title {
        padding: 8px 20px;
        border-bottom: 1px solid #f1f1f1;
        p {
          color: @normal-color;
          font-family: 'SourceHanSansSC-Regular-2';
          position: relative;
          display: inline-block;
        }
      }
      &-tag {
        padding: 12px;
        display: flex;
        flex-wrap: wrap;
        .tag {
          font-size: 12px;
          margin: 6px 12px;
          cursor: pointer;
          position: relative;
          color: #2080f7;
          padding: 2px 10px;
          background: #2080f730;
          border-radius: 2px;
          .anticon-close {
            font-size: 10px;
            margin-left: 8px;
            cursor: pointer;
          }
        }
      }
    }
  }
}

@keyframes text-effect {
  0%, 100% {
    width: 0;
  }
  50% {
    width: 100%;
  }
}
</style>
